<template>
  <div class="container">
    <el-row>
      <el-col :sm="36" :lg="24">
        <el-result
          icon="info"
          :title="error.statusCode"
          :subTitle="error.message"
        >
          <template slot="extra">
            <el-button
              type="primary"
              size="medium"
              @click="$router.replace('/')"
              >返回主页</el-button
            >
          </template>
        </el-result>
      </el-col>
    </el-row>
    <!-- <h3>{{ "状态码:" + error.statusCode }}</h3>
    <h3>{{ "错误信息" + error.message }}</h3>
    <h3 @click="$router.replace('/')" class="turn">点击返回至首页</h3> -->
  </div>
</template>

<script>
export default {
  props: ["error"], // 两个属性：statusCode（状态码）,message（错误信息）
  created() {},
  mounted() {},
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  /* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 */
  top: 0;
  left: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  color: aquamarine;
}
.turn {
  cursor: pointer;
}
</style>
